<template>
  <div>
    <div class="text" :class="{ box: isBox, border: isBorder }">
      <div :class="{ inner: isInner }">春夏</div>
      <div :class="ClassObject">秋冬</div>
      <div :class="ClassObject2">张国荣</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
const isBox = ref(true);
const isBorder = ref(true);
const isInner = ref(true);
const isMell = ref(true);
const ClassObject = reactive({ inner: true });
const ClassObject2 = computed(() => ({
  meal: isMell.value,
}));
</script>

<style lang="scss" scoped>
.text {
  text-align: center;
  line-height: 30px;
}
.box {
  width: 100%;
  background: linear-gradient(white, rgb(239, 250, 86));
}
.border {
  border: 2px dotted black;
}
.inner {
  margin: 2px 0px;
  width: 100px;
  height: 30px;
  border: 2px solid blue;
}
.meal {
  width: 200px;
  height: 30px;
  border: 2px dashed red;
}
</style>
